<template>
	<view class="content">
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" style="background: #FFE226;color:#000 ;" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<!-- <button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
				</view>
			</view>
		</view>
		<!-- <button type="primary" @tap="shareFc()">生成海报</button> -->
		<!-- 显示用的海报 -->
		
		<view class="wrapper">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/posterLogo.png" class="posterLogo"></image>
			<view class="wrapper-content">
				<view class="wrapper-header">
					<image :src="circleDetail.thumb_img_url" mode="aspectFill"></image>
					<view class="nick-name">{{circleDetail.name}}</view>
				</view>
				
				<view class="wrapper-tag">
					总流量 {{circleDetail.total_views}} · {{circleDetail.user_num}}人关注
				</view>
				<!-- <view class="wrapper-time">
					{{circleDetail.created_at}}
				</view> -->
				<view class="wrapper-main">
					<image src="../../../static/img/shareIcon.png" mode="widthFix"></image>
					<h4>圈子简介</h4>
					<text>
						{{circleDetail.desc}}
					</text>
				</view>
				<view class="wrapper-bottom">
					<view class="divide"></view>
					<view class="wrapper-bottom-left">
						<view class="from">扫码进入哔哔机</view>
						<view>这是一个年轻人瞎哔哔的圈子</view>
					</view>
					<view class="wrapper-bottom-right">
						<image :src="qrcode" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<button type="primary" size="mini" class="share" @click="shareFc">保存海报</button>
				<button type="primary" size="mini" open-type="share">分享给好友</button>
			</view>
		</view>
		<!-- 显示用的海报end -->
		
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import _app from '@/utils/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/utils/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				content:'据BBC12月27日报道，因气候变暖，全球已有一半以上的珊瑚因白化死亡。也许你会觉得这个消息是骇人听闻，然而这却是人类面临的现实。而且随着全球气候的不断回温，变暖。大部分珊瑚2050年或灭绝。',
				poster: {},
				circle_id:'',
				circleDetail:'',
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				qrcode:''
			}
		},
		onLoad(options) {
			// uni.clearStorage();
			this.circle_id = options.circle_id||15;
			this.getArticleList();
			this.getShareQrCode();
			
		},
		onShareAppMessage(){
		   return {
		    title: '哔哔机',
		    desc:'哔哔机',
			path: `/pages/circlebar/circlebarhome/circlebarhome?circle_id=${this.circle_id}`
		  }
		},
		methods: {
			formatContent(text){
				//去除标签
				let pattern=/<img.*?alt="(.*?)".*?>/gi;
				let text1=text.replace(pattern,'$1'||'');
				
				let pattern1=/<img.*?>/gi;
				text1=text.replace(pattern1,'');
				
				let pattern2=/<a.*?>(.*?)<\/a>/gi;
				text1=text1.replace(pattern2,'$1');
				console.log(text1)
				return text1
			},
			async getShareQrCode(){
				let _this=this
				wx.downloadFile({
				  url: `${this.$api.BASE_URL}circle/getShareQrCode?user_token=${uni.getStorageSync('userToken')}&circle_id=${this.circle_id}`,
				  success (res) {
				    // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
				    if (res.statusCode === 200) {
				      _this.qrcode=res.tempFilePath;
				    }
				  }
				})
			},
			//获取圈子首页帖子列表+最新评论
			async getArticleList(){
			    let params = {
			        circle_id: this.circle_id,
			        user_token: uni.getStorageSync('userToken')
			    }
			    const res = await this.$api.getCircleArticle(params);
			    if (res.data.level == 'success'){
			        this.circleDetail = res.data.data;
			        console.log(res)
			    }
			},
			async shareFc() {
				try {
					console.log('准备生成:' + new Date())
					// console.time('计算海报生成时间');
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						// background: {
						// 	width: 1080,
						// 	height: 3020,
						// 	backgroundColor: '#666'
						// },
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											Context.setGlobalAlpha(0.3);
											// Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
											Context.setGlobalAlpha(1);
										}
									},
									//头像
									{
										type: 'image',
										url: this.circleDetail.thumb_img_url,
										// alpha: .3,
										dx:bgObj.width*0.05,
										dy: bgObj.height*0.1+50,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo.height;
											return {
												// circleSet: {
												// 	x: imageInfo.width * scale / 2,
												// 	y: bgObj.width * 0.2 / 2,
												// 	r: bgObj.width * 0.2 / 2
												// }, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: 110, // 因为设置了圆形图片 所以要乘以2
												dHeight: 110,
												roundRectSet: { // 圆角矩形
													r: 16
												}
											}
										}
									},
									//圈名
									{
										type: 'text',
										// fontStyle: 'italic',
										text: this.circleDetail.name,
										size: fontSize,
										// color: 'white',
										// alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										
										infoCallBack(textLength) {
											_app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx:bgObj.width*0.25+30 ,
												dy: bgObj.height*0.1+bgObj.width * 0.2 /2+50,
												
											}
										},
										
										serialNum: 0,
										// id: 'tag1'	//自定义标识
									},
									
									
									
									//标签1
									{
										type: 'text',
										// fontStyle: 'italic',
										text: `总流量${this.circleDetail.total_views}`,
										fontWeight: 'bold',
										size: fontSize,
										// color: 'white',
										// alpha: .5,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx:bgObj.width*0.05,
												dy: bgObj.height*0.1+bgObj.width * 0.3+50,
											}
										},
										serialNum: 0,
										id: 'tag1'	//自定义标识
									},
									//标签2
									{
										type: 'text',
										text: `${this.circleDetail.user_num}人关注`,
										fontWeight: 'bold',
										size: fontSize,
										// color: 'white',
										// alpha: .75,
										textAlign: 'left',
										textBaseline: 'middle',
										serialNum: 1,
										allInfoCallback({	//v3.0.1 更新 可以获取drawArray中全部数据
											drawArray
										} = {}) {
											const obj = drawArray.find(item => item.id === 'tag1');
											return {
												dx: obj.dx+obj.textLength+70,
												dy: obj.dy 
											}
											//也可以return promise对象
											// return new Promise((rs, rj) => {
											// 	setTimeout(() => {
											// 		rs({
											// 			dx: obj.dx+obj.textLength+20,
											// 			dy: obj.dy 
											// 		});
											// 	}, 1);
											// });
										},
										id: 'tag2'
									},
									
									//文章
									{
										type: 'text',
										// fontStyle: 'italic',
										text: this.circleDetail.desc,
										size: 24,
										// color: 'white',
										// alpha: .5,
										lineFeed: {
										        maxWidth: bgObj.width*0.9,
										        lineHeight: 50,
										        lineNum: -1,
										        dx: -1
										    },
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											// _app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx:bgObj.width*0.05,
												dy: bgObj.height*0.1+bgObj.width * 0.3+100,
											}
										},
										serialNum: 0,
										id: 'tag1'	//自定义标识
									},
									{
										type: 'image',
										url: this.qrcode,
										// alpha: .3,
										dx: bgObj.width * 0.85,
										dy: bgObj.height - bgObj.width * 0.25+10,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo.height;
											return {
												dWidth: imageInfo.width * scale/1.8,
												dHeight: bgObj.width * 0.2/1.8,
											}
										}
									},
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.timeEnd('计算海报生成时间结果');
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif
				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.hideCanvasView {
		position: relative;
	}
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}
	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}
	.flex_column {
		display: flex;
		flex-direction: column;
	}
	.backgroundColor-white {
		background-color: white;
	}
	.border_radius_10px {
		border-radius: 10px;
	}
	.padding1vh {
		padding: 1vh;
	}
	.posterImage {
		width: 60vw;
	}
	.flex_row {
		display: flex;
		flex-direction: row;
	}
	.marginTop2vh {
		margin-top: 2vh;
	}
	
	
	.wrapper{
		min-height: calc(100vh - 150rpx);
		width: 100%;
		background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/rank-bgk.png');
		background-size:100% 100%;
		padding-bottom: 150rpx;
		.posterLogo{
			width: 240rpx;
			height: 74rpx;
			margin: 40rpx 20rpx;
		}
		.wrapper-content{
			position: relative;
			border-radius: 20rpx;
			background: #fff;
			margin:1rpx 20rpx 40rpx 20rpx;
			padding:60rpx;
			box-sizing: border-box;
			min-height: 80vh;
			.wrapper-header{
				@include flex(flex-start);
				image{
					width:100rpx;
					height: 100rpx;
					border-radius: 16rpx;
				}
				.nick-name{
					font-size:28rpx;
					font-weight: 600;
					margin-left:14rpx;
				}
			}
			.wrapper-tag{
				@include flex(flex-start);
				margin:50rpx 0 100rpx 0;
				font-size: 24rpx;
			}
			.wrapper-time{
				font-size: 24rpx;
				color:rgba(187,188,191,1);
			}
			.wrapper-main{
				margin-top: 30rpx;
				image{
					width:50rpx;
					height: 50rpx;
				}
				h4{
					font-weight: bolder;
					line-height: 72rpx;
					height: 72rpx;
				}
				view{
					/*margin-top:30rpx;*/
					font-size:32rpx;
				}
				text{
					line-height: 48rpx;
					display: block;
				}
			}
			.wrapper-bottom{
				width: calc(100% - 120rpx);
				position: absolute;
				bottom: 20rpx;
				@include flexWrap(space-between);
				.divide{
					width:100%;
					height: 16rpx;
					background:rgba(247,247,247,1);
					margin-bottom: 30rpx;
				}
				image{
					width:100rpx;
					height: 100rpx;
				}
				.wrapper-bottom-left{
					color:rgba(139,141,147,1);
					font-size: 24rpx;
					.from{
						font-weight: 600;
						font-size:30rpx;
						margin:20rpx 0;
					}
				}
			}
		}
		.btn-wrapper{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 150rpx;
			background: rgba(255,226,38,1);
			box-shadow: 0rpx -2rpx 16rpx 10rpx rgba(255,226,38,1);
			@include flex(space-around);
			button{
				color: #000000;
				background-color: #ffffff;
				width:100px;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
			}
		}
			
	}
</style>